<template>
  <el-dialog width="60%" title="已推送信息" :visible.sync="showDialog">
    <el-table border :data="list" style="width: 100%">
      <el-table-column label="班级名称" width="180">
        <template slot-scope="{ row }">{{ row.class_name }}</template>
      </el-table-column>
      <el-table-column label="考试状态" min-width="500">
        <template slot-scope="{ row }">
          <div>
            <span style="color: #409eff; margin-right: 20px; margin-left: 20px"
              >主考:</span
            >
            <span>{{
              row.main_exam_status === 1
                ? "待设定事件"
                : "待考试 | " + row.exam_time_start.substring(0, 10)
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.main_exam_status === 1"
            type="text"
            size="medium"
            @click="cancelBindHandler(row)"
            >解除绑定</el-button
          >
          <span v-if="row.main_exam_status === 2">暂无操作</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-button type="primary" size="small" @click="showDialog = false"
        >关闭</el-button
      >
    </el-row>
  </el-dialog>
</template>

<script>
import { bindClassApi } from "@/api/examInfo";
export default {
  name: "ClassInfo",
  data() {
    return {
      showDialog: false,
      list: [], //推送班级
    };
  },
  methods: {
    async cancelBindHandler(val) {
      console.log(val);
      await this.$confirm("确定解绑吗");
      await bindClassApi({
        class_id: val.class_id,
        del: true,
        exam_id: val.exam_id,
      });
      this.$message.success("解绑成功");
      this.showDialog = false;
      this.$emit("updateList");
    },
  },
};
</script>

<style scoped lang="scss"></style>
